<template>
  <div>
    <div class="mybox">
      <el-button type="primary" @click="booking">在线预约</el-button>
    </div>
    <el-table :data="tableData" border class="myTab" :default-sort = "{prop: 'bookingTime', order: 'descending'}">
      <el-table-column
        align="center"
        label="姓名"
        prop="patientName"
      ></el-table-column>
      <el-table-column align="center" label="预约医生" prop="doctorId">
        <template slot-scope="scope">
          {{ scope.row["doctorId"] | tableFilter(doctorOptions) }}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="预约时间"
        prop="bookingTime"
        sortable
      ></el-table-column>
      <el-table-column align="center" label="预约科室" prop="departmentId">
        <template slot-scope="scope">
          {{ scope.row["departmentId"] | departmentFilter(departmentOptions) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="费用"
        prop="outpatientFees"
      ></el-table-column>
      <el-table-column align="center" label="就诊状态" prop="statu">
        <template slot-scope="scope">
          <el-tag :type="scope.row.statu == 1 ? 'success' : ''">
            {{ scope.row["statu"] | dataFilter(statuOptions) }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[5, 10, 15, 20, 25]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      class="myStyle"
    >
    </el-pagination>

    <el-dialog :visible.sync="dialogVisible" title="预约挂号"  class="myDal">
      <el-form
        :rules="formRules"
        ref="dialogForm"
        :model="dialogFormData"
        label-width="100px"
       class="myForm"
        algin="left"
      >
        <el-form-item label="姓名" prop="patientName" >
          <el-input
          class="input1"
            v-model="dialogFormData.patientName"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择科室" prop="departmentId">
          <el-select
            v-model="dialogFormData.departmentId"
            @change="getbookingDoctorList"
           class="mySel"
          >
            <el-option
              v-for="item in departmentOptions"
              :key="item.value"
              :label="item.departmentName"
              :value="item.departmentId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择医生" prop="doctorId">
          <el-select v-model="dialogFormData.doctorId" class="mySel">
            <el-option
              v-for="item in bookingDoctorOptions"
              :key="item.value"
              :label="item.doctorName"
              :value="item.doctorId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约时间" prop="bookingTime">
          <el-date-picker value-format="yyyy-MM-dd" 
          v-model="dialogFormData.bookingTime"
          type="date"
          placeholder="选择日期"  class="mySel" >
        </el-date-picker>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="bookingDoctor">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  comName: "首页",
  comSort: 1,
  name: "home",
  data() {
    return {
      doctorOptions: [],
      bookingDoctorOptions: [],
      departmentOptions: [],
      statuOptions: [
        { label: "未就诊", value: 0 },
        { label: "已就诊", value: 1 },
      ],
      tableData: [],
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0,
      },
      uId: "",
      tableLoading: false,
      dialogVisible: false,
      dialogFormData: {
        patientName: "",
        bookingTime: "",
        departmentId: "",
        doctorId: "",
      },
      formRules: {
        patientName: [{ required: true, trigger: "change",message: "请确认正确的信息"  }],
        departmentId: [{ required: true, trigger: "change", message: "请确认正确的信息"  }],
        doctorId: [{ required: true, trigger: "change", message: "请确认正确的信息"  }],
        bookingTime: [{ required: true, trigger: "change", message: "请确认正确的信息"  }],
      },
    };
  },
  mounted() {


    this.getdoctorList();
    this.getdepartmentList();
    this.getdata();
  },
  filters: {
    tableFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.doctorId) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].doctorName;
      }
    },

    departmentFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.departmentId) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].departmentName;
      }
    },

    dataFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.value) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].label;
      }
    },
  },
  methods: {

    bookingDoctor(){
         axios({
        url:'/api/user/booking',
        method:'post',
        data:{
          ...this.dialogFormData,
           uId: sessionStorage.getItem("uId"),
        },
         headers: {
             token: sessionStorage.getItem("Token"),
          }
      }).then(res=>{
         if (res.data.error === 0) {
           
          this.cancel()
          this.$notify.success({title: '预约成功'})

          this.getdata()
        } else {
          this.$notify.error({title: '预约失败'})
        }
      })

    },

    cancel () {
      this.$refs.dialogForm.resetFields()
      this.dialogVisible = false
    },

    booking() {
      this.dialogVisible = true;
    },

    getbookingDoctorList() {
      axios({
        url: "/api/doctor/doctorlist",
        method: "get",
        params: {
          departmentId: this.dialogFormData.departmentId,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        this.bookingDoctorOptions = res.data.list;
        console.log(res.data.list);
      });
    },

    getdoctorList() {
      axios({
        url: "/api/doctor/doctorlist",
        method: "get",
        params: {},
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        // console.log(res);
        this.doctorOptions = res.data.list;
        // console.log("55", this.doctorOptions);
      });
    },

    getdepartmentList() {
      axios({
        url: "/api/admin/departmentlist",
        method: "get",
        params: {},
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        // console.log(res);
        this.departmentOptions = res.data.list;
        // console.log("55", this.departmentOptions);
      });
    },

    getdata() {
      axios({
        url: "/api/user/list",
        method: "get",
        params: {
          uId: sessionStorage.getItem("uId"),
          limit: this.pageInfo.limit,
          page: this.pageInfo.page,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        // console.log(res);
        this.tableData = res.data.list;
        this.pageInfo.total = res.data.total;
      });
    },
    // 每页多少条切换
    handleSizeChange(value) {
      this.pageInfo.limit = value;

      this.getdata();
    },
    // 当前页码的切换
    handleCurrentChange(value) {
      this.pageInfo.page = value;

      this.getdata();
    },
  },
};
</script>

<style lang="scss" scoped>
.myStyle {
  margin-top: 40px;
  text-align: center;
}

.myForm{
display: flex;
     flex-direction: column;
justify-content: flex-end; 
margin-top: 30px;
margin-right: 22px;
}

.mybox {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 36px;
  margin-bottom: 10px;
}

.myTab {
  width: 95%;
  text-align: center;
  margin: 0 auto;
  
}


.myDal{
     display:flex;
     flex-direction: column;
   justify-content:center;
   align-items: left;
   padding: 30px 150px;

     .input1{
    width:340px; 

  }

  .mySel{
 
    width: 340px
    

}
}

</style>
